<template>
  <h1>{{ obj }}</h1>
  <h3>结构出的数据 - 年龄：{{ age1 }}</h3>
  <h3>结构出的响应式数据 - 年龄：{{ age2 }}</h3>
  <h3>结构出的响应式数据 - 年龄：{{ age3 }}</h3>
  <button @click="obj.age++"> 年龄 + 1 </button>
</template>

<script setup lang="ts">
import { ref, toRefs, toRef } from 'vue';

const obj = ref({
  name: '张三',
  age: 18,
  gender: '男',
});
const { age: age1 } = obj.value;

// toRefs() 关联整个对象为响应式，一般配合解构使用
const { age: age2 } = toRefs(obj.value);

// toRef() 关联对象的单个属性为响应式
const age3 = toRef(obj.value, 'age');
</script>
